<template>
    <view class="content">
        <view class="box">
        	<view class="item">
        		<view>
        			账号
        		</view>
        		<view class="item-r">
        			<input type="text" v-model="username" placeholder="请输入账号" class="inp">
        		</view>
        	</view>
        	<view class="item">
        		<view>
        			密码
        		</view>
        		<view class="item-r">
        			<input type="password" v-model="password" placeholder="请输入密码" class="inp">
        		</view>
        	</view>
			<view class="item">
				<view>
					确认密码
				</view>
				<view class="item-r">
					<input type="password" v-model="conPassword" placeholder="请输入确认密码" class="inp">
				</view>
			</view>
        	<view class="item">
        		<view>
        			昵称
        		</view>
        		<view class="item-r">
        			<input type="text" v-model="nickname" placeholder="请输入昵称" class="inp">
        		</view>
        	</view>
        	<view class="item">
        		<view>
        			角色
        		</view>
        		<view class="item-r" @click="show_1 = true">
        			<view class="item-r-text" v-if="role">{{role}}</view>
        			<view class="place" v-else>请选择</view>
        			<u-icon name="arrow-right" color="#b3b3b3" size="28" class="u-m-l-10"></u-icon>
        		</view>
        	</view>
        </view>
		
		<view class="btn" @click="$u.throttle(doSubmit, 500)">确认提交</view>
		
		<!-- 角色 -->
		<u-select v-model="show_1" mode="single-column" :list="roleList"
			value-name="id" label-name="name" @confirm="confirmRole"></u-select>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                show_1: false,//角色
				username: '',
				password: '',
				conPassword: '',
				nickname: '',
				role: '',
				roleId: '',
				roleList: [],
            };
        },
        onLoad() {
            this.getRole()
        },
        methods: {
			doSubmit() {
				if (!this.username) {
					this.$toast('请输入账号')
					return
				}
				if (!this.password) {
					this.$toast('请输入密码')
					return
				}
				if (!this.conPassword) {
					this.$toast('请输入确认密码')
					return
				}
				if (this.password != this.conPassword) {
					this.$toast('两次密码不一致')
					return
				}
				if (!this.nickname) {
					this.$toast('请输入昵称')
					return
				}
				if (!this.roleId) {
					this.$toast('请选择角色')
					return
				}
				
				this.$ajax('staff_add_users', {
				    userToken: this.$getSync('userToken'),
					username: this.username,//账号
					password: this.password,//密码
					password_confirm: this.conPassword,//确认密码
					nickname: this.nickname,//昵称
					role_id: this.roleId,//角色编号
				}).then(ret => {
					if (ret.status == 0) {
						this.$toast('提交成功')
						setTimeout(() => {
							this.$backT()
						}, 500)
					} else {
						this.$toast(ret.message);
					}
				});
			},
			
			confirmRole(e) {
				console.log(e)
				this.role = e[0].label
				this.roleId = e[0].value
			},
			
            getRole() {
            	this.$ajax('staff_get_role', {
                    userToken: this.$getSync('userToken'),
                }).then(ret => {
            		if (ret.status == 0) {
            			this.roleList = ret.data
            		} else {
            			this.$toast(ret.message);
            		}
            	});
            },
        }
    };
</script>

<style lang="scss">
    page{
        background-color: #f5f5f5;
    }
    .content{
    	padding: 20rpx;
    }
	.box{
		padding: 0 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.item{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx 0;
		border-bottom: 2rpx solid #e6e6e6;
	}
	.border-b{
		border-bottom: 2rpx solid #00b7bd;
	}
	.item:last-child{
		border-bottom: none;
	}
	.item-r{
		flex: 1;
		display: flex;
		justify-content: flex-end;
		align-items: center;
	}
	.inp{
		flex: 1;
		text-align: right;
		padding-left: 20rpx;
		font-size: 28rpx;
	}
	.item-r-text{
		flex: 1;
		text-align: right;
		padding-left: 20rpx;
	}
	.place {
	    font-size: 28upx;
	    color: #787878;
	    // margin-right: 10upx;
	}
	.btn{
		font-size: 30rpx;
		color: #fff;
		text-align: center;
		padding: 25rpx;
		margin: 70rpx 0;
		background: #01b8bd;
		border-radius: 50rpx;
	}

</style>
